<template>
  <div>
    <el-button type="primary" @click="requestPermission">
      请求通知权限
    </el-button>
    <el-button type="success" @click="showNotify">
      测试通知（带图片）
    </el-button>
  </div>
</template>

<script>
export default {
  name: "NotifyDemo",
  methods: {
    requestPermission() {
      if (Notification.permission === "default") {
        Notification.requestPermission().then(p => {
          this.$message.success("权限状态：" + p);
        });
      } else {
        this.$message.info("当前权限状态：" + Notification.permission);
      }
    },
    showNotify() {
      if (Notification.permission === "granted") {
        const n = new Notification("新订单提醒", {
          body: "您有一条新订单，请注意处理！",
          icon: "/static/logo.png",   // 左侧小图标
          image: "/static/banner.png" // 大图（Chrome/Edge 有效）
        });

        n.onclick = () => {
          window.focus();
          this.$message.success("点击了通知");
        };
      } else {
        this.$message.warning("请先授权通知权限");
      }
    }
  }
};
</script>
